<template>
  <el-dialog width="80%" :title="title" :visible.sync="visible" :before-close="closeDialog">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" size="small">
      <el-form-item label="规格名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入商品规格名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <div v-for="item,index in form.typeGroupDTOList" :key="index" style="display: flex;flex-direction:column;">
          <div style="display: flex;align-items: center;">
            {{item.typeGroupName}}
            <i @click="form.typeGroupDTOList.splice(index,1)" style="margin-left: 10px;cursor: pointer;" class="el-icon-circle-close"></i>
          </div>
          <div style="display: flex;">
            <el-tag style="margin-right:10px;"
              v-for="citem,cindex in item.groupValueList" :key="citem.groupValueName"
              closable :disable-transitions="false"   @close="tagHandleClose(item.groupValueList,cindex)"
              >
              {{citem.groupValueName}}
            </el-tag>
            <div style="flex-basis:150px">
              <el-input v-model="item.groupValueName" autocomplete="off" placeholder="请输入商品值"></el-input>
            </div>
            <el-button @click="addGroupValueNameClick(item)">添加</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="addRule" label="">
        <el-button type="primary" @click="addRule = false">添加新规格</el-button>
      </el-form-item>
      <el-form-item v-else label="规格">
        <el-row >
          <el-col :span="8">
            <el-form-item label="">
              <el-input v-model="innerForm.typeGroupName" autocomplete="off" placeholder="请输入规格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格值">
              <el-input v-model="innerForm.groupValueName" autocomplete="off" placeholder="请输入规格值"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align:center;">
            <el-button type="primary" @click="addRuleClick">确定</el-button>
            <el-button @click="addRule = true">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="comitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addSpecifications ,getPagingSpecifications,updateSpecifications} from '@/api/modules/CommodityManagement/commodityRule.js'
export default {
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false
    },
    specificationsId:{
      type: Number
    }
  },
  watch: {
    visible(newdata) {
      if (!newdata) {
        this.resetForm("ruleForm");
        this.form =  {
          name:"",
          typeGroupDTOList:[]
        },
        this.innerForm = {
          typeGroupName:"",
          groupValueName:"",
        }
        this.addRule = true
      }else{
        if(this.specificationsId){
          this.getPagingSpecifications()
        }
      }
    }
  },
  data() {
    return {
      form:{
        name:"",
        typeGroupDTOList:[]
      },
      innerForm:{
        typeGroupName:"",
        groupValueName:"",
      },
      addRule: true,
      rules: {
        name: [
          { required: true, message: '请输入商品规格名称', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    getPagingSpecifications() {
      let data = {
        specificationsId:this.specificationsId
      }
      console.log(data)
      getPagingSpecifications({specificationsPagingDTO:JSON.stringify(data)}).then(res => {
        this.form = res.data.data
      })
    },
    tagHandleClose(item,cindex){
      if(item.length == 1){
        this.$message({
          message: '每个规格至少需要一个规则值！',
          type: 'warning'
        });
        return;
      }
      item.splice(cindex, 1);
    },
    addGroupValueNameClick(item){
      // console.log(item)
      if(item.groupValueName == ""){
        this.$message({
          message: '请输入添加规则值！',
          type: 'warning'
        });
        return;
      }
      for(let o of item.groupValueList){
        if(o.groupValueName == item.groupValueName){
          item.groupValueName = ""
          return;
        }
      }
      item.groupValueList.push({groupValueName:item.groupValueName})
      item.groupValueName = ""
    },
    addRuleClick(){
      if(this.innerForm.typeGroupName == ""){
        this.$message({
          message: '请输入规格！',
          type: 'warning'
        });
        return;
      }
      if(this.innerForm.groupValueName == ""){
        this.$message({
          message: '请输入规则值！',
          type: 'warning'
        });
        return;
      }
      for(let o of this.form.typeGroupDTOList){
        if(o.typeGroupName == this.innerForm.typeGroupName){
          this.innerForm = {
            typeGroupName:"",
            groupValueName:"",
          };
          this.$message({
            message: '规则已存在！',
            type: 'warning'
          });
          return;
        }
      }
      let data = {
        typeGroupName:this.innerForm.typeGroupName,
        groupValueName:"",
        groupValueList:[{groupValueName:this.innerForm.groupValueName}]
      }
      this.form.typeGroupDTOList.push(data)
      this.innerForm = {
        typeGroupName:"",
        groupValueName:"",
      };
      this.addRule = true
    },
    closeDialog() {
      this.$emit("closeDialog")
    },
    comitDialog() {
      this.submitForm("ruleForm");
    },
    operationFrom(){
      this.$emit("operationFrom")
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.form.typeGroupDTOList.length == 0){
            this.$message({
              message: '请至少添加一条商品规格！',
              type: 'warning'
            });
            return;
          }
          // alert('submit!');
          let data = JSON.parse(JSON.stringify(this.form));
          if(this.title == "新增商品规格"){
            addSpecifications(data).then(()=>{
              this.operationFrom();
            })
          }
          else{
            updateSpecifications(data).then(()=>{
              this.operationFrom();
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>